<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取手机朝向</title>
</head>
<body>
  <h1>手机当前方向</h1>
  <p>alpha（指北方向）: <span id="alpha">0</span>°</p>
  <p>beta（前后倾斜角）: <span id="beta">0</span>°</p>
  <p>gamma（左右倾斜角）: <span id="gamma">0</span>°</p>
  <script>
    if (window.DeviceOrientationEvent) {
      window.addEventListener("deviceorientation", (event) => {
        const alpha = event.alpha; // 设备朝北方向的角度 (0-360度)
        const beta = event.beta;  // 设备上下倾斜的角度 (-180到180)
        const gamma = event.gamma; // 设备左右倾斜的角度 (-90到90)

        // 更新页面显示
        document.getElementById("alpha").textContent = alpha.toFixed(2);
        document.getElementById("beta").textContent = beta.toFixed(2);
        document.getElementById("gamma").textContent = gamma.toFixed(2);
      });
    } else {
      alert("您的设备或浏览器不支持方向传感器");
    }
  </script>
</body>
</html>
